import { markInboxAsRead, queryInboxDetail } from 'apis/message';
import FixedBottomButton from 'components/common/FixedBottomButton';
import Page from 'components/common/Page';
import { useMessageStore } from 'store/message';
import { Descriptions, Spin } from 'antd';
import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom-v5-compat';

const MessageDetail = () => {
    const { id } = useParams();
    const [spinning, setSpinning] = useState(false);
    const [data, setData] = useState({});
    const { getUnreadMessage } = useMessageStore();
    useEffect(() => {
        setSpinning(true);
        queryInboxDetail({ id })
            .then((res) => {
                setData(res);
            })
            .finally(() => {
                setSpinning(false);
            })
            .catch((err) => {
                console.log(err);
            });
        markInboxAsRead({ id }).then(() => {
            // 更新未读消息
            getUnreadMessage();
        });
    }, []);
    return (
        <Spin spinning={spinning}>
            <Page title='站内信详情'>
                <Descriptions>
                    <Descriptions.Item label='标题' span={24}>
                        {data.title}
                    </Descriptions.Item>
                    <Descriptions.Item label='内容' span={24}>
                        {data.content}
                    </Descriptions.Item>
                    <Descriptions.Item label='外链' span={24}>
                        <a href={data.contentLink} target='_blank'>
                            {data.contentLink}
                        </a>
                    </Descriptions.Item>
                    <Descriptions.Item label='创建时间' span={24}>
                        {data?.createTimeStr}
                    </Descriptions.Item>
                </Descriptions>
            </Page>
            <FixedBottomButton hideSubmit={true}></FixedBottomButton>
        </Spin>
    );
};

export default MessageDetail;
